<template>
  <div class="coures">
    <el-dialog
        v-model="modelValue"
        :align-center="true"
        :show-close="false"
        :width="isLogin ? 535 :500"
    >
      <div v-if="!isLogin" class="flex-all-center">
        <login-form :isDialog="true" @clickLogin="clickLogin"></login-form>
      </div>
      <template v-if="isLogin" #header="{ close, titleId, titleClass }">
        <div>
          <div class="course-dio-top tw-px-22 tw-pl-52 flex-between-center tw-relative">
            <div class="flex-column">
              <span class="font-xxx color-white">扫码添加客服微信</span>
              <!--              <p-->
              <!--                  class="flex-all-center font-normal tw-w-206 tw-h-29 tw-bg-white tw-rounded-[29px] tw-text-[#FE825E]"-->
              <!--              >-->
              <!--                扫码即可免费下载资料-->
              <!--              </p>-->
            </div>
            <img alt="" class="tw=w-172 tw-h-172" src="@/assets/images/course/final-step.png"/>
          </div>
          <el-icon class="tw-absolute tw-top-16 tw-right-16 click" color="#fff" size="22"
                   @click="modelValue = !modelValue">
            <CircleCloseFilled/>
          </el-icon>
        </div>
      </template>
      <div v-if="isLogin">
        <p class="text-center font-normal tw-my-24">还有更多资料等你来拿</p>
        <div v-if="type==0" class="tw-text-[#FE7C57]">
          <div class="flex-all-center">
            <p class="tw-mr-12 flex-all-center tw-w-110">
              <el-icon color="#FE7C57" size="18">
                <SuccessFilled/>
              </el-icon>
              <span>全科知识脑图</span>
            </p>
            <p class="tw-l-12 flex-all-center tw-w-110">
              <el-icon color="#FE7C57" size="18">
                <SuccessFilled/>
              </el-icon>
              <span>经典1 0 0题</span>
            </p>
          </div>
          <div class="flex-all-center tw-mt-8">
            <p class="tw-mr-12 flex-all-center tw-w-110">
              <el-icon color="#FE7C57" size="18">
                <SuccessFilled/>
              </el-icon>
              <span>高频考点速记</span>
            </p>
            <p class="tw-l-12 flex-all-center tw-w-110">
              <el-icon color="#FE7C57" size="18">
                <SuccessFilled/>
              </el-icon>
              <span>考前冲刺卷 </span>
            </p>
          </div>
        </div>
        <div class="tw-w-535 tw-bg-[#EBEBEB] tw-h-2 -tw-ml-16 tw-mt-16"></div>
        <!--        <p class="tw-text-[#7C7B7B] text-center tw-mt-16">-->
        <!--          已有1347人领取-->
        <!--          <span class="tw-text-[#FE7E5A]">[一级建造师 资料汇总]</span>-->
        <!--        </p>-->
        <p class="text-center tw-mt-10">每月持续更新，备考路上好助手</p>
        <p class="text-center tw-mt-10">打开微信扫码添加老师</p>
        <p class="flex-all-center">
          <img :src="store.state.customerImg" alt="" class="tw-w-224 tw-h-244"/>
        </p>
        <p class="text-center tw-mt-10 flex-all-center tw-text-[#0BB71F]">
          <el-icon class="tw-mr-2" color="#0BB71F" size="16">
            <SuccessFilled/>
          </el-icon>
          已通过安全认证 可放心添加
        </p>
        <p class="text-center tw-mt-10">
          已添加老师 |
          <span class="tw-text-[#04ADDB] click" @click="clickRefresh"
          >手动刷新</span
          >
        </p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {defineModel} from "vue";
import {CircleCloseFilled, SuccessFilled} from "@element-plus/icons-vue";
import LoginForm from "@/views/user/component/login-form.vue";
import {useStore} from 'vuex';

const store = useStore();


const modelValue = defineModel("displayDio");
const isLogin = defineModel("isLogin");
const type = defineModel("type");

defineProps({
  wechat: {
    type: Object,
    default: {},
  },
});
let emit = defineEmits(["clickRefresh"]);
const clickRefresh = () => {
  emit("clickRefresh", 478);
};
const clickLogin = () => {
  emit("clickRefresh", 478);
  isLogin.value = true;
};
</script>

<style lang="scss" scoped>
.course-dio-top {
  width: 535px;
  height: 126px;
  background: linear-gradient(90deg, #fe815d 0%, #ff9e82 100%);
  border-radius: 0px 0px 0px 0px;
  margin: -16px;
}

.coures {
  .el-dialog__body {
    padding: 0;
  }

  .el-dialog .is-align-center {
    padding: 0;
  }
}
</style>
